<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>借阅详情</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/exclusive.css" />
		<script src="../js/mui.min.js "></script>
	    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
		    body {height: auto;}
            .mui-control-content {
	                  background-color: white;
	                  min-height: 500px;
                             }

            .mui-control-content .mui-loading {
	                   margin-top: 50px;
                       }

        </style>
	</head>

	<body>
		<header class="mui-bar mui-table-view all-top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<div class="mui-slider" style="border-bottom:1px solid #EFEFF4; margin-top: 2.7rem;">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/bookImage/4.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item  borrow-img">
					<a href="#">
						<img src="../images/bookImage/1.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item ">
					<a href="#">
						<img src="../images/bookImage/3.jpg">
					</a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/bookImage/4.jpg">
					</a>
				</div>
				
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/bookImage/1.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			
			</div>
		</div>

		<div class="mui-table-view mui-table-view-striped mui-table-view-condensed">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell ">
					<span class="word">算法导论(原书第2版)</span>
					<p>
						<font color="red">¥39.6</font>
						<font class="old_price">¥49.5
						</font>
						<p>
				</li>
			</ul>
		</div>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right">
						<font class="word">已选</font>
					</a>

					<div class="mui-collapse-content">
						<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9' ">
						 <button class="mui-btn mui-btn-numbox-minus " type="button ">-</button>
						 <input id="test " class="mui-input-numbox " type="number " value="5" />
						 <button class="mui-btn mui-btn-numbox-plus " type="button ">+</button>
					   </div>
		            </div>
		        </li>

		    </ul>
		</div>
		<article class="detail-article">
				<nav>
					<ul class="article">
						<li id="talkbox1" class="article-active">商品详情</li>
						<li id="talkbox2">规格参数</li>
						<li id="talkbox3">售后保障</li>
					</ul>
				</nav>

				<section class="talkbox1">
					
					<figure><img src="../images/bookImage/img-x1.jpg" style="width:100%; margin-bottom: 3rem;" /></figure>
				</section>

				<section class="talkbox2" style="display: none; margin-bottom: 3rem;">
					
								<ul class="mui-table-view"><li class="mui-table-view-cell"><p>编者/作者： J.K.罗琳 </p><p>译者：</p> <p>出 版 社： 人民文学</p><p> 出版时间： 2014.01</p><p>版    次： 1</p><p>印    次：</p><p> I S B N ： 7020103332</p><p >所属分类：图书 >> 文学 >> 外国小说 >> 现代</p></li>
					</div>
				</section>
				<section class="talkbox3" style="display: none; margin-bottom: 3rem;">
					
				   <ul class="mui-table-view"><li class="mui-table-view-cell"><p>正品：心田只做正品 假一赔一</p><p>供货：商品均由品牌商或一级经销商供货</p><p>送货：全国送达</p><p>运费：辽宁省内单张订单金额满58元免运费</p><p>退换货：签收15日内，商品及包装保持本网站出售时原状且配件齐全，不影响二次销售，全款退货</p></li>
					
				</section>
				
			</article>
		<!-- 底部导航 -->
		<nav class="mui-bar mui-bar-tab ">
			<a class="mui-tab-item " href="#tabbar-with-contact " style="width: 20%; ">
				<div class="mui-icon-extra mui-icon-extra-cart word" style="margin-top:4%;margin-bottom:0;"></div>
				<div class="mui-tab-label word" style="margin:0;">购物车</div>
			</a>
			<a class="mui-tab-item mui-active " href="#tabbar " style="background-color: #EC971F;width: 40%; ">
			
				<span class="mui-tab-label word" style="font-size:17px;color: #FFFFFF;">加入购物车</span>
			</a>
			<a class="mui-tab-item " href="#tabbar-with-map " style="background-color: #F14E41;width: 40%; ">
			
				<span class="mui-tab-label word" style="font-size:17px;color: #FFFFFF;">立即购买</span>
			</a>
		</nav>

		
<script type="text/javascript">

	$(function(){
		
		$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
				$('.talkbox3').hide();
			}else if($(this).attr("id")=="talkbox2"){
				$('.talkbox2').show();
				$('.talkbox1').hide();
			    $('.talkbox3').hide();
			}else{
				$('.talkbox3').show();
				$('.talkbox1').hide();
				$('.talkbox2').hide();
			}

		});	
	});
</script>
	</body>

</html>